<breadcrumb></breadcrumb>

<mat-card>
  <mat-card-header>
    <mat-card-title>Basic Table</mat-card-title>
    <mat-card-subtitle>Shows name, color and age data.</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <mat-table aria-readonly="true"
               [dataSource]="basicDataSource"
               aria-label="Users favorite colors and age">
      <ng-container cdkColumnDef="name">
        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
        <mat-cell *cdkCellDef="let row;">{{row.name}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="color">
        <mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
        <mat-cell *cdkCellDef="let row;">{{row.color}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="age">
        <mat-header-cell *cdkHeaderCellDef>Age</mat-header-cell>
        <mat-cell *cdkCellDef="let row;">{{row.age}}</mat-cell>
      </ng-container>
      <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-header>
    <mat-card-title>Sortable Table</mat-card-title>
    <mat-card-subtitle>Shows name, color and age data. Sorted ascending by age.</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <mat-table [dataSource]="sortDataSource"
               aria-label="Users favorite colors and age"
               aria-readonly="true"
               matSort matSortActive="age"
               matSortDirection="asc">
      <ng-container cdkColumnDef="name">
        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
        <mat-cell *cdkCellDef="let row;">{{row.name}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="color">
        <mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
        <mat-cell *cdkCellDef="let row;">{{row.color}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="age">
        <mat-header-cell *cdkHeaderCellDef mat-sort-header>Age</mat-header-cell>
        <mat-cell *cdkCellDef="let row;">{{row.age}}</mat-cell>
      </ng-container>
      <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-header>
    <mat-card-title>Paginated Table</mat-card-title>
    <mat-card-subtitle>Shows name, color and age data. Shows only first 5 until
      paginated.</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <mat-table [dataSource]="paginatedDataSource"
               aria-readonly="true"
               aria-label="Users favorite colors and age">
      <ng-container cdkColumnDef="name">
        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
        <mat-cell *cdkCellDef="let row;">{{row.name}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="color">
        <mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
        <mat-cell *cdkCellDef="let row;">{{row.color}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="age">
        <mat-header-cell *cdkHeaderCellDef>Age</mat-header-cell>
        <mat-cell *cdkCellDef="let row;">{{row.age}}</mat-cell>
      </ng-container>
      <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator #paginator
                   [length]="6"
                   [pageIndex]="0"
                   [pageSize]="3"
                   [pageSizeOptions]="[1, 3, 5]">
    </mat-paginator>
  </mat-card-content>
</mat-card>
